<template>
  <view class="address-list-container">
    <!-- 地址列表 -->
    <scroll-view scroll-y class="address-list" v-if="addressList.length > 0">
      <view 
        class="address-item" 
        v-for="(item, index) in addressList" 
        :key="item.id"
        @click="selectAddress(item)"
      >
        <!-- 默认地址标记 -->
        <view class="default-tag" v-if="item.is_default==1">默认</view>
        
        <!-- 地址信息 -->
        <view class="address-info">
          <view class="top-row">
            <text class="name">{{item.name}}</text>
            <text class="phone">{{item.mobile}}</text>
          </view>
          <view class="address-detail">
            {{item.province}}{{item.city}}{{item.area}}{{item.address}}
          </view>
        </view>
        
       <view class="r">
		   <!-- 删除按钮 -->
		   <view class="edit-btn" @click.stop="deleteAddress(item.id,index)">
		     <image src="/static/icon/del.png" mode="widthFix"></image>
		   </view>
			<!-- 编辑按钮 -->
			<view class="edit-btn" @click.stop="editAddress(item.id,item)">
			  <image src="/static/icon/edit.png" mode="widthFix"></image>
			</view>

       </view>
      </view>
    </scroll-view>
    
    <!-- 空地址提示 -->
    <view class="empty-address" v-else>
      <!-- <image src="/static/empty-address.png" mode="widthFix"></image> -->
      <view class="empty-text">您还没有添加地址哦~</view>
    </view>
    
    <!-- 底部新增按钮 -->
    <view class="footer">
      <button class="add-btn" @click="addNewAddress">新增地址</button>
    </view>
  </view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
export default {
  data() {
    return {
      addressList: [], // 地址列表
      isSelectMode: false // 是否为选择模式（从其他页面跳转过来选择地址）
    }
  },
  onLoad(options) {
    // 从URL参数判断是否是选择模式
    if (options.selectMode) {
      this.isSelectMode = true
    }
    
    // 加载地址数据
    this.loadAddressList()
  },
  methods: {
    // 加载地址列表
    loadAddressList() {
		request({
			url: 'address/list',
			method: 'get',
			data: {}
		}).then(res => {
			if (res.status == 200) {
				this.addressList = res.data
			}
		})
      
      // 实际项目中可能是这样的API调用
      // uni.request({
      //   url: '/api/address/list',
      //   success: (res) => {
      //     this.addressList = res.data
      //   }
      // })
    },
    
    // 选择地址
    selectAddress(address) {
      if (this.isSelectMode) {
        // 如果是选择模式，返回上一页并带回选择的地址
        const pages = getCurrentPages()
        const prevPage = pages[pages.length - 2]
        if (prevPage && prevPage.$vm) {
          prevPage.$vm.selectedAddress = address
        }
        uni.navigateBack()
      } else {
        // // 非选择模式，进入地址详情
        // uni.navigateTo({
        //   url: `/pages/address/detail?id=${address.id}`
        // })
      }
    },
    
    // 编辑地址
    editAddress(id,item) {
		console.log(1111,item)
      uni.navigateTo({
        url: `/pages/addressEdit/addressEdit?id=${id}&dataJson=${JSON.stringify(item)}`
      })
    },
    
    // 新增地址
    addNewAddress() {
      uni.navigateTo({
        url: '/pages/addressEdit/addressEdit',
      })
    },
    
    // 设置默认地址
    setDefault(id) {
      uni.showLoading({ title: '设置中...' })
      // 模拟API请求
      setTimeout(() => {
        this.addressList.forEach(item => {
          item.is_default = item.id === id
        })
        uni.hideLoading()
        uni.showToast({ title: '设置成功' })
      }, 500)
    },
    
    // 删除地址
    deleteAddress(id) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该地址吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '删除中...' })
			request({
				url: 'address/info-del',
				method: 'post',
				data: {
					id:id
				}
			}).then(res => {
				if (res.status == 200) {
					this.addressList = this.addressList.filter(item => item.id !== id)
					uni.hideLoading()
					uni.showToast({ title: '删除成功' })
				}
			})
          }
        }
      })
    }
  }
}
</script>
<style>
.address-list-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.address-list {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}

.address-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
  display: flex;
  align-items: center;
}

.default-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #e74c3c;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 10rpx;
  border-radius: 12rpx 0 12rpx 0;
}

.address-info {
  flex: 1;
}

.top-row {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  margin-right: 30rpx;
}

.phone {
  font-size: 28rpx;
  color: #666;
}

.address-detail {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.edit-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

.edit-btn image {
  width: 40rpx;
  height: 40rpx;
}

.empty-address {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 100rpx;
}

.empty-address image {
  width: 300rpx;
  margin-bottom: 40rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.footer {
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.add-btn {
  background-color: #e74c3c;
  color: #fff;
  border-radius: 50rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
}

/* 操作按钮组 - 可选功能 */
.action-btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}

.action-btn {
  padding: 10rpx 20rpx;
  font-size: 26rpx;
  border-radius: 30rpx;
  margin-left: 20rpx;
}

.default-btn {
  border: 1rpx solid #e74c3c;
  color: #e74c3c;
}

.delete-btn {
  border: 1rpx solid #999;
  color: #999;
}
</style>